<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>体彩API测试</span>
      </div>
      
      <el-row :gutter="20">
        <el-col :span="8">
          <el-button type="primary" @click="testGetMatches" :loading="loading.matches">
            获取赛事列表
          </el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="success" @click="testGetLeagues" :loading="loading.leagues">
            获取联赛列表
          </el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="warning" @click="testSyncData" :loading="loading.sync">
            同步数据
          </el-button>
        </el-col>
      </el-row>
      
      <el-divider></el-divider>
      
      <!-- 原始数据展示 -->
      <div v-if="rawData">
        <h3>原始API响应数据：</h3>
        <el-input
          type="textarea"
          :rows="10"
          v-model="rawDataString"
          readonly
          placeholder="点击上方按钮获取数据"
        />
      </div>
      
      <!-- 解析后的数据展示 -->
      <div v-if="parsedData.length > 0" style="margin-top: 20px;">
        <h3>解析后的赛事数据（{{ parsedData.length }}条）：</h3>
        <el-table :data="parsedData" border style="width: 100%">
          <el-table-column prop="sporttery_id" label="体彩ID" width="100" />
          <el-table-column prop="league" label="联赛" width="120" />
          <el-table-column prop="home_team" label="主队" width="150" />
          <el-table-column prop="away_team" label="客队" width="150" />
          <el-table-column prop="match_time" label="比赛时间" width="180">
            <template slot-scope="{row}">
              <span>{{ row.match_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="{row}">
              <el-tag :type="row.status | statusFilter">
                {{ row.status | statusNameFilter }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="win_odds" label="胜赔" width="80" />
          <el-table-column prop="draw_odds" label="平赔" width="80" />
          <el-table-column prop="lose_odds" label="负赔" width="80" />
        </el-table>
      </div>
      
      <!-- 错误信息展示 -->
      <div v-if="errorMessage" style="margin-top: 20px;">
        <el-alert
          :title="errorMessage"
          type="error"
          :closable="false"
          show-icon>
        </el-alert>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getSportteryMatches, getSportteryLeagues, parseSportteryMatchData, syncSportteryDataToLocal } from '@/api/sportteryService'
import { parseTime } from '@/utils'

export default {
  name: 'SportteryTest',
  filters: {
    statusFilter(status) {
      const statusMap = {
        upcoming: 'info',
        live: 'success',
        finished: 'primary',
        cancelled: 'danger'
      }
      return statusMap[status]
    },
    statusNameFilter(status) {
      const statusMap = {
        upcoming: '未开始',
        live: '进行中',
        finished: '已结束',
        cancelled: '已取消'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      loading: {
        matches: false,
        leagues: false,
        sync: false
      },
      rawData: null,
      rawDataString: '',
      parsedData: [],
      errorMessage: ''
    }
  },
  methods: {
    async testGetMatches() {
      this.loading.matches = true
      this.errorMessage = ''
      
      try {
        const response = await getSportteryMatches()
        this.rawData = response
        this.rawDataString = JSON.stringify(response, null, 2)
        
        // 解析数据
        this.parsedData = parseSportteryMatchData(response)
        
        this.$notify({
          title: '成功',
          message: `获取到${this.parsedData.length}条赛事数据`,
          type: 'success',
          duration: 3000
        })
      } catch (error) {
        this.errorMessage = `获取赛事列表失败: ${error.message}`
        this.$notify({
          title: '错误',
          message: this.errorMessage,
          type: 'error',
          duration: 5000
        })
      } finally {
        this.loading.matches = false
      }
    },
    
    async testGetLeagues() {
      this.loading.leagues = true
      this.errorMessage = ''
      
      try {
        const response = await getSportteryLeagues()
        this.rawData = response
        this.rawDataString = JSON.stringify(response, null, 2)
        
        this.$notify({
          title: '成功',
          message: '获取联赛列表成功',
          type: 'success',
          duration: 3000
        })
      } catch (error) {
        this.errorMessage = `获取联赛列表失败: ${error.message}`
        this.$notify({
          title: '错误',
          message: this.errorMessage,
          type: 'error',
          duration: 5000
        })
      } finally {
        this.loading.leagues = false
      }
    },
    
    async testSyncData() {
      this.loading.sync = true
      this.errorMessage = ''
      
      try {
        const result = await syncSportteryDataToLocal()
        
        if (result.success) {
          this.parsedData = result.data
          this.$notify({
            title: '成功',
            message: `同步成功，获取到${result.count}条数据`,
            type: 'success',
            duration: 3000
          })
        } else {
          throw new Error(result.error)
        }
      } catch (error) {
        this.errorMessage = `同步数据失败: ${error.message}`
        this.$notify({
          title: '错误',
          message: this.errorMessage,
          type: 'error',
          duration: 5000
        })
      } finally {
        this.loading.sync = false
      }
    }
  }
}
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}

.el-button {
  width: 100%;
}
</style>
